
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<% String path=request.getContextPath(); String basePath=request.getScheme() + "://" + request.getServerName() + ":"
        + request.getServerPort() + path + "/" ; %>
<!doctype html>
<html lang="en" class="fullscreen-bg">

<head>
    <base href="<%=basePath%>">
    <title>登录</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/assets/css/login.css">

</head>
<html lang="en" class="fullscreen-bg">
<head>
    <base href="<%=basePath%>">
    <title>登录</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <!-- VENDOR CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/vendor/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/vendor/linearicons/style.css">
    <!-- MAIN CSS -->
    <link rel="stylesheet" href="assets/css/main.css">
    <!-- FOR DEMO PURPOSES ONLY. You should remove this in your project -->
    <link rel="stylesheet" href="assets/css/demo.css">
    <!-- GOOGLE FONTS -->
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700" rel="stylesheet">
    <!-- ICONS -->
    <link rel="apple-touch-icon" sizes="76x76" href="assets/img/apple-icon.png">
    <link rel="icon" type="image/png" sizes="96x96" href="assets/img/favicon.png">
</head>
<body>
<!-- WRAPPER -->
<div id="wrapper">
    <div class="vertical-align-wrap">
        <div class="vertical-align-middle">
            <div class="auth-box ">
                <div class="left">
                    <div class="content">
                        <div class="header">
                            <div class="logo text-center"><img src="assets/img/logo-dark.png" alt="Klorofil Logo"></div>
                            <p class="lead">请登录账号</p>
                        </div>
                        <form class="form-auth-small" action="/studentSociety/student/login" method="post">
                            <div class="form-group">
                                <label for="signin-text" class="control-label sr-only">账号</label>
                                <input type="text" class="form-control" name="account" id="signin-text" value="" placeholder="请输入账号">
                            </div>
                            <div class="form-group">
                                <input type="password" class="form-control" name="password" id="signin-password" value="" placeholder="请输入密码">
                            </div>
                            <div class="form-group clearfix">
                                <label class="fancy-checkbox element-left">
                                    <input type="checkbox">
                                    <span>免登录</span>
                                </label>
                            </div>
                            <button type="figure" class="btn btn-primary btn-lg btn-block">登录</button>
                            <div class="bottom">
                                <span class="helper-text"><i class="fa fa-lock"></i> <a href="#">忘记密码?</a></span>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="right">
                    <div class="overlay"></div>
                    <div class="content text">
                        <h1 class="heading">学生协会管理系统</h1>
                        <p>XX小组作品</p>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
</div>
<script>
    let message = '${param.message}';
    if (message!= "" && message!= 'null') {
        alert(message);
    }
</script>
</div>
<!-- END WRAPPER -->
</body>
</html>


<%--<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>--%>
<%--<% String path=request.getContextPath(); String basePath=request.getScheme() + "://" + request.getServerName() + ":"--%>
<%--        + request.getServerPort() + path + "/" ; %>--%>
<%--<!doctype html>--%>
<%--<html lang="en" class="fullscreen-bg">--%>

<%--<head>--%>
<%--    <base href="<%=basePath%>">--%>
<%--    <title>登录</title>--%>
<%--    <meta charset="utf-8">--%>
<%--    <link rel="stylesheet" href="/assets/css/login.css">--%>

<%--</head>--%>
<%--    <% String message=(String) request.getAttribute("message"); %>--%>
<%--    <% if (message !=null) { %>--%>
<%--<div id="error-message"--%>
<%--     style="color: #fff; background-color: #f44336; padding: 10px; border-radius: 5px;text-align: center; font-weight: bold;">--%>
<%--    <i class="fas fa-exclamation-circle" style="margin-right: 5px;"></i>--%>
<%--    <%= message %>--%>
<%--</div>--%>
<%--    <% } %>--%>
<%--<section>--%>
<%--    <div class="box">--%>
<%--        <div class="cross" style="--i:0;"></div>--%>
<%--        <div class="cross" style="--i:1;"></div>--%>
<%--        <div class="cross" style="--i:2;"></div>--%>
<%--        <div class="cross" style="--i:3;"></div>--%>
<%--        <div class="cross" style="--i:4;"></div>--%>
<%--        <div class="cross" style="--i:5;"></div>--%>


<%--        <div class="container">--%>
<%--            <div class="form">--%>
<%--                <h2>协会管理系统</h2>--%>
<%--                <form id="loginForm" action="/studentSociety/student/login" method="post">--%>
<%--                    <div class="inputBx">--%>
<%--                        <input type="text" id="login" name="account" required="required">--%>
<%--                        <span>账号</span>--%>
<%--                        <i class="fas fa-user-circle"></i>--%>

<%--                    </div>--%>
<%--                    <span id="accountError" style="color: #f44336; font-size: 12px; display: block; margin-top: 5px;"></span>--%>

<%--                    <div class="inputBx password">--%>
<%--                        <input id="password-input" type="password" name="password"--%>
<%--                               required="required">--%>
<%--                        <span>密码</span>--%>
<%--                        <a href="#" class="password-control"--%>
<%--                           onclick="return show_hide_password(this);"></a>--%>
<%--                        <i class="fas fa-key"></i>--%>
<%--                        <span id="passwordError" style="color: #f44336; font-size: 12px; display: block; margin-top: 5px;"></span>--%>

<%--                    </div>--%>
<%--                    <label class="remember">--%>
<%--                        <input type="checkbox"> 记住我--%>
<%--                    </label>--%>
<%--                    <div class="inputBx">--%>
<%--                        <input type="submit" value="Log in" disabled>--%>
<%--                    </div>--%>
<%--                </form>--%>
<%--                <p>忘记密码？ <a href="#">点这里</a></p>--%>
<%--                <p>还没有账号 <a href="#">注册</a></p>--%>
<%--            </div>--%>
<%--        </div>--%>
<%--    </div>--%>

<%--</section>--%>
<%--<script>--%>
<%--    document.addEventListener('DOMContentLoaded', function () {--%>
<%--        const loginInput = document.getElementById('login');--%>
<%--        const passwordInput = document.getElementById('password-input');--%>
<%--        const submitButton = document.querySelector('input[type="submit"]');--%>
<%--        const accountError = document.getElementById('accountError');--%>
<%--        const passwordError = document.getElementById('passwordError');--%>

<%--        // 清空错误提示的函数--%>
<%--        function clearErrorMessages() {--%>
<%--            if (accountError) accountError.innerText = '';--%>
<%--            if (passwordError) passwordError.innerText = '';--%>
<%--        }--%>

<%--        // 验证输入框内容--%>
<%--        function validateInputs() {--%>
<%--            let isValid = true;--%>

<%--            if (loginInput.value.trim() === '') {--%>
<%--                accountError.innerText = '账号不能为空';--%>
<%--                isValid = false;--%>
<%--            } else {--%>
<%--                accountError.innerText = '';--%>
<%--            }--%>

<%--            if (passwordInput.value.trim() === '') {--%>
<%--                passwordError.innerText = '密码不能为空';--%>
<%--                isValid = false;--%>
<%--            } else {--%>
<%--                passwordError.innerText = '';--%>
<%--            }--%>

<%--            return isValid;--%>
<%--        }--%>

<%--        // 启用/禁用提交按钮--%>
<%--        function toggleSubmitButton() {--%>
<%--            submitButton.disabled = !(loginInput.value && passwordInput.value);--%>
<%--        }--%>

<%--        // 初始化页面时，清空错误提示并检查按钮状态--%>
<%--        clearErrorMessages();--%>
<%--        toggleSubmitButton();--%>

<%--        // 监听输入事件，以动态调整提交按钮状态--%>
<%--        loginInput.addEventListener('input', toggleSubmitButton);--%>
<%--        passwordInput.addEventListener('input', toggleSubmitButton);--%>

<%--        // 监听提交按钮点击事件，验证输入内容--%>
<%--        submitButton.addEventListener('click', function (event) {--%>
<%--            if (!validateInputs()) {--%>
<%--                event.preventDefault();--%>
<%--            }--%>
<%--        });--%>

<%--        // 错误提示信息自动隐藏--%>
<%--        const errorMessage = document.getElementById('error-message');--%>
<%--        if (errorMessage) {--%>
<%--            setTimeout(() => {--%>
<%--                errorMessage.style.display = 'none';--%>
<%--            }, 1500);--%>
<%--        }--%>
<%--    });--%>

<%--    // 切换密码显示/隐藏--%>
<%--    function show_hide_password(target) {--%>
<%--        const input = document.getElementById('password-input');--%>
<%--        if (input.getAttribute('type') === 'password') {--%>
<%--            target.classList.add('view');--%>
<%--            input.setAttribute('type', 'text');--%>
<%--        } else {--%>
<%--            target.classList.remove('view');--%>
<%--            input.setAttribute('type', 'password');--%>
<%--        }--%>
<%--        return false;--%>
<%--    }--%>


<%--</script>--%>
<%--<style>--%>
<%--    .cross {--%>
<%--        position: absolute;--%>
<%--        background: rgba(255, 255, 255, 0.1);--%>
<%--        backdrop-filter: blur(5px);--%>
<%--        box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);--%>
<%--        border: 1px solid rgba(255, 255, 255, 0.15);--%>
<%--        border-radius: 15px;--%>
<%--        animation: cross 10s linear infinite;--%>
<%--        animation-delay: calc(-1s * var(--i)) !important;--%>

<%--    }--%>

<%--    @keyframes cross {--%>

<%--        0%,--%>
<%--        100% {--%>
<%--            transform: translateY(-40px);--%>
<%--        }--%>

<%--        50% {--%>
<%--            transform: translateY(30px);--%>
<%--        }--%>
<%--    }--%>

<%--    .cross:nth-child(1) {--%>
<%--        width: 100px;--%>
<%--        height: 100px;--%>
<%--        top: -15px;--%>
<%--        right: -45px;--%>
<%--    }--%>

<%--    .cross:nth-child(2) {--%>
<%--        width: 150px;--%>
<%--        height: 150px;--%>
<%--        top: 105px;--%>
<%--        left: -125px;--%>
<%--        z-index: 2;--%>
<%--    }--%>

<%--    .cross:nth-child(3) {--%>
<%--        width: 60px;--%>
<%--        height: 60px;--%>
<%--        bottom: 85px;--%>
<%--        right: -45px;--%>
<%--        z-index: 2;--%>
<%--    }--%>

<%--    .cross:nth-child(4) {--%>
<%--        width: 50px;--%>
<%--        height: 50px;--%>
<%--        bottom: 35px;--%>
<%--        left: -95px;--%>
<%--    }--%>

<%--    .cross:nth-child(5) {--%>
<%--        width: 50px;--%>
<%--        height: 50px;--%>
<%--        top: -15px;--%>
<%--        left: -25px;--%>
<%--    }--%>

<%--    .cross:nth-child(6) {--%>
<%--        width: 85px;--%>
<%--        height: 85px;--%>
<%--        top: 165px;--%>
<%--        right: -155px;--%>
<%--        z-index: 2;--%>
<%--    }--%>
<%--</style>--%>